// 点击登录按钮，跳转到登录页面
$("#login").click(function () {
    location.href = "http://127.0.0.1:9527/login.html"
})
// 点击注册按钮，跳转到注册页面
$("#reg").click(function () {
    location.href = "http://127.0.0.1:9527/reg.html"
})

// 在localStroage中查找是否有admin账号信息，如果有表示已经登录了，
// 就应该展示欢迎用户，已经主要内容信息
for (let i in localStorage) {
    if (i === "admin") {
        // 用户信息对象
        let userObj = JSON.parse(localStorage[i]);
        $(".choice").addClass("hide");
        $(".login").removeClass("hide");
        $(".content").removeClass("hide");
        $(".login span").text(userObj.userName);
        $(".login img").attr("src", userObj.headImg);
    }
}

// 点击退出登录，删除localStroage中的登录信息，
// 欢迎用户框和主要内容框消失，登录注册框出现
$("#cancel").click(function () {
    delete localStorage.admin;
    $(".choice").removeClass("hide");
    $(".login").addClass("hide");
    $(".content").addClass("hide");
})


// 进入系统，默认展示前10条学生信息
function randerTable(localPage, pageNumber) {
    console.log("页码：", localPage);
    let startIndex = (localPage - 1) * pageNumber;

    $.ajax({
        type: "get",
        url: "http://127.0.0.1:9527/page",
        data: {
            startIndex, //表示当前页内容的起始下标
            pageNumber //表示当前页内容的总数量
        },
        // // 要在请求头中添加token
        // headers:{
        //     Authorization:"Bearer "+JSON.parse(localStorage.admin).token
        // },
        // dataType: "json",
        success: function (res) {
            console.log(res);
            if (res.data.length > 0) {
                $(".studentList tbody").html(""); //清空
                // 把返回的数据渲染到页面中
                for (let i = 0; i < res.data.length; i++) {
                    $(".studentList tbody").append(`
                    <tr>
                            <td><input type="checkbox" class="oneChoice"></td>
                            <td>${i+1}</td>
                            <td>${res.data[i].classID}</td>
                            <td>${res.data[i].name}</td>
                            <td>${res.data[i].college}</td>
                            <td>${res.data[i].major}</td>
                            <td>${res.data[i].grade}</td>
                            <td>${res.data[i].classNumber}</td>
                            <td>${res.data[i].age}</td>
                            <td><button class="del">删除</button><button class="change">修改</button></td>
                        </tr>
                    `)
                }

                $(".localPage").text(localPage);
            } else {
                $(".localPage").text($(".localPage").text() - 1);
                randerTable($(".localPage").text(), 10);
            }



        }
    })
}
randerTable(1, 10);

// 计算一共有多少页
function allPage() {
    $.ajax({
        type: "get",
        url: "http://127.0.0.1:9527/page/allNumber",
        data: {},
        // dataType: "json",
        // // 要在请求头中添加token
        // headers:{
        //     Authorization:"Bearer "+JSON.parse(localStorage.admin).token
        // },
        success: function (res) {
            let allNumber = res.data[0]["COUNT(*)"]; //学生总数量
            $(".allNumber").text(allNumber);
            $(".allPage").text(Math.ceil(allNumber / 10));
        }
    })
}
allPage();







// 事件委托
$(".content").click(function () {
    //点击切换目录样式
    if (event.target.localName === "li") {
        // 所有目录删除active类名
        $(".menu li").removeClass("active");
        // 当前点击的目录添加类名
        event.target.classList.add("active");
        // console.log(event.target.id);
        let index = event.target.id;
        $(".menuBox").addClass("hide");
        $(".menuBox").eq(index).removeClass("hide");
        if (index == 3) {
            // 渲染统计图表
            myChart();
        }


    }
    // 首页
    if (event.target.className === "firstPage") {
        randerTable(1, $(".pageNumber").text());
    }
    // 上一页
    if (event.target.className === "prePage") {
        let localPage = $(".localPage").text() * 1 - 1;
        if (localPage < 1) {
            alert("当前已经是第一页！");
        } else {
            randerTable(localPage, $(".pageNumber").text());
        }

    }
    // 下一页
    if (event.target.className === "nextPage") {
        let localPage = $(".localPage").text() * 1 + 1;
        if (localPage > $(".allPage").text()) {
            alert("当前已经是最后一页！");
        } else {
            randerTable(localPage, $(".pageNumber").text());
        }

    }
    // 尾页
    if (event.target.className === "lastPage") {
        randerTable($(".allPage").text(), $(".pageNumber").text());
    }

    // 删除
    if (event.target.className === "del") {
        console.log(event.target.parentNode.parentNode.children);
        let oneChoice = event.target.parentNode.parentNode.children[0].children[0];
        if (oneChoice.checked) {
            // 把需要删除的学生信息作为参数传给服务端，服务端连接数据库找到该学生进行删除
            // 之后再重新渲染当前页面的表格
            let stuObj = {
                classID: event.target.parentNode.parentNode.children[2].innerText,
                name: event.target.parentNode.parentNode.children[3].innerText,
                college: event.target.parentNode.parentNode.children[4].innerText
            }
            $.ajax({
                type: "post",
                url: "http://127.0.0.1:9527/page/delStudent",
                data: stuObj,
                success: function (res) {
                    console.log("删除：", res);
                    // 重新渲染表格
                    let localPage = $(".localPage").text();
                    randerTable(localPage, 10);
                    // 重新渲染总学生数量
                    allPage();

                }
            })

        } else {
            alert("请先选中需要删除的学生！");
        }
    }


    // 查询
    if (event.target.className === "search") {
        let value = $(".stuInfor").val().trim();
        let classID;
        let name;
        if (!isNaN(value)) {
            classID = value;
        } else {
            name = value
        }
        $.ajax({
            type: "post",
            url: 'http://127.0.0.1:9527/page/searchStudent',
            data: {
                classID,
                name
            },
            success: function (res) {
                if (res.data.length > 0) {
                    // 把查询出来的学生展示到页面中
                    $(".searchStudent tbody").html("");
                    $(".searchStudent tbody").append(`
                    <tr>
                        <td><input type="checkbox" class="oneChoice"></td>
                        <td>1</td>
                        <td>${res.data[0].classID}</td>
                        <td>${res.data[0].name}</td>
                        <td>${res.data[0].college}</td>
                        <td>${res.data[0].major}</td>
                        <td>${res.data[0].grade}</td>
                        <td>${res.data[0].classNumber}</td>
                        <td>${res.data[0].age}</td>
                        <td><button class="del">删除</button><button class="change">修改</button></td>
                    </tr>
                    `)
                } else {
                    alert("没有找到该学生！");
                }

            }
        })
        $(".stuInfor").val("");
    }

    // 新增
    if (event.target.className === "addStudent active") {
        // 新增学生信息表单出现
        $(".studentInfor").css("display", "flex");

    }

    // 确定新增学生
    if (event.target.className === "sureAdd") {
        // 判断用户输入的内容都符合格式要求
        let flag = true;
        // 判断学号
        if ($(".spClassID").text() != "√") {
            flag = false;
        }
        // 判断姓名
        if ($(".spName").text() != "√") {
            flag = false;
        }
        // 判断学院、专业、班级三级联动是否有值
        if ($("#college").val() == "" || $("#major").val() == "" || $("#classNumber").val() == "") {
            flag = false;
        }
        // 判断年龄
        if ($(".stuAge").val() == "") {
            flag = false;
        }
        if (flag) {
            // 获取所有信息，上传数据库
            $.ajax({
                type: "post",
                url: "http://127.0.0.1:9527/page/addStudent",
                data: {
                    classID: $(".stuClassID").val(),
                    name: $(".changeStuName").val(),
                    college: $("#college").val(),
                    major: $("#major").val(),
                    classNumber: $("#classNumber").val(),
                    age: $(".stuAge").val(),
                    grade: $(".stuClassID").val().slice(0, 4)
                },
                success: function (res) {
                    $.ajax({
                        type: "get",
                        url: "http://127.0.0.1:9527/page/allNumber",
                        data: {},
                        // dataType: "json",
                        // // 要在请求头中添加token
                        // headers:{
                        //     Authorization:"Bearer "+JSON.parse(localStorage.admin).token
                        // },
                        success: function (res) {
                            let allNumber = res.data[0]["COUNT(*)"]; //学生总数量
                            $(".allNumber").text(allNumber);
                            $(".allPage").text(Math.ceil(allNumber / 10));
                            randerTable($(".allPage").text(), $(".pageNumber").text());
                        }
                    })
                    // 清空输入框
                    $(".stuClassID").val("");
                    $(".stuName").val("");
                    $("#college").html(` <option value="">请选择学院</option>`);
                    $("#major").html(` <option value="">请选择专业</option>`);
                    $("#classNumber").html(` <option value="">请选择班级</option>`);
                    $(".stuAge").val("");
                    $(".spClassID").text("");
                    $(".spName").text("");
                    // 学生信息框消失
                    $(".studentInfor").css("display", "none");


                }
            })
        } else {
            alert("请确认信息输入完毕无误！");
        }
    }

    // 取消新增学生
    if (event.target.className === "cancelAdd") {
        // 清空表单
        $(".stuClassID").val("");
        $(".stuName").val("");
        $("#college").html(` <option value="">请选择学院</option>`);
        $("#major").html(` <option value="">请选择专业</option>`);
        $("#classNumber").html(` <option value="">请选择班级</option>`);
        $(".stuAge").val("");
        $(".spClassID").text("");
        $(".spName").text("");
        // 新增学生信息表单消失
        $(".studentInfor").css("display", "none");
    }

    // 修改学生
    if (event.target.className === "change") {
        let oneChoice = event.target.parentNode.parentNode.children[0].children[0];
        if (oneChoice.checked) {
            // 把选中学生的信息先填入表格，用户修改表格中的相关信息
            // 点击确定之后，就把所有学生信息传给数据库，修改学生信息
            // 之后再重新渲染当前页面的表格
            let stuObj = {
                classID: event.target.parentNode.parentNode.children[2].innerText,
                name: event.target.parentNode.parentNode.children[3].innerText,
                college: event.target.parentNode.parentNode.children[4].innerText,
                major: event.target.parentNode.parentNode.children[5].innerText,
                classNumber: event.target.parentNode.parentNode.children[7].innerText,
                age: event.target.parentNode.parentNode.children[8].innerText
            }

            // 把学生信息填入表单
            $(".changeStudentInfor").css("display", "flex");
            $(".changeStuClassID").val(stuObj.classID);
            $(".changeStuName").val(stuObj.name);
            $(".changeStuAge").val(stuObj.age);

            $("#changeCollege").append(`<option value="${stuObj.college}">${stuObj.college}</option> `);
            $("#changeMajor").append(`<option value="${stuObj.major}">${stuObj.major}</option> `);
            $("#changeClassNumber").append(`<option value="${stuObj.classNumber}">${stuObj.classNumber}</option> `);

            let one = $("#changeCollege")[0];
            let two = $("#changeMajor")[0];
            let three = $("#changeClassNumber")[0];
            threeStage(one, two, three);

        } else {
            alert("请先选中需要修改的学生！");
        }
    }

    // 确认修改
    if (event.target.className == "sureChange") {
        let flag = true;
        // 判断姓名修改是否符合格式要求
        if ($(".changeSpName").text().length > 1) {
            flag = false;
        }
        if (flag) {
            // 获取所有的学生信息,上传到数据库
            $.ajax({
                type: "post",
                url: "http://127.0.0.1:9527/page/changeStudent",
                data: {
                    classID: $(".changeStuClassID").val(),
                    name: $(".changeStuName").val(),
                    college: $("#changeCollege").val(),
                    major: $("#changeMajor").val(),
                    classNumber: $("#changeClassNumber").val(),
                    age: $(".changeStuAge").val()
                },
                success: function (res) {
                    // 修改学生信息框消失
                    $(".changeStudentInfor").css("display", "none");
                    // 重新渲染当前页面
                    let localPage = $(".localPage").text();
                    randerTable(localPage, 10);

                }
            })


        } else {
            alert("修改内容格式有误！请重新输入！");
        }




    }








})

// 验证表单
// 1.验证输入的学号
$(".stuClassID").blur(function () {
    let reg = /^20\d{10}$/;
    if (reg.test($(".stuClassID").val().trim())) {
        // 连接数据库，查看该学号是否已经存在，如果存在，就不能新增该学生
        $.ajax({
            type: "post",
            url: "http://127.0.0.1:9527/page/searchStudent",
            data: {
                classID: $(".stuClassID").val().trim()
            },
            success: function (res) {
                // 表示该学号已经存在
                if (res.data.length > 0) {
                    $(".spClassID").text("该学号已经存在！请重新输入！");
                } else {
                    $(".spClassID").text("√");
                }
            }
        })
    } else {
        $(".spClassID").text("该学号格式有误！请重新输入！");
    }
})

// 2.验证输入的姓名
$(".stuName").blur(function () {
    // 汉字正则：2-5个汉字
    let reg = /^[\u4e00-\u9fa5]{2,5}$/;
    if (reg.test($(".stuName").val().trim())) {
        $(".spName").text("√");
    } else {
        $(".spName").text("该学生姓名输入格式有误！请重新输入！");
    }
})

$(".changeStuName").blur(function () {
    // 汉字正则：2-5个汉字
    let reg = /^[\u4e00-\u9fa5]{2,5}$/;
    if (reg.test($(".changeStuName").val().trim())) {
        $(".changeSpName").text("√");
    } else {
        $(".changeSpName").text("该学生姓名输入格式有误！请重新输入！");
    }
})

// 学院、专业、班级三级联动函数
let one = $("#college")[0];
let two = $("#major")[0];
let three = $("#classNumber")[0];
threeStage(one, two, three)
// token:令牌

// 三级联动函数
function threeStage(one, two, three) {
    // 1.学院下拉列表聚焦时，加载所有学院选项
    one.onfocus = function () {
        // 清空学院下拉列表里面所有的选项
        one.options.length = 0;
        // 获取所有学院列表
        $.ajax({
            type: "get",
            url: "http://127.0.0.1:9527/page/college",
            data: {
                college: "college"
            },
            success: function (res) {
                // console.log(res);
                // 数组去重
                // 1.把所有学院名称存入数组中
                let arr = [];
                for (let i = 0; i < res.data.length; i++) {
                    arr.push(res.data[i].college);
                }
                // 2.把数组放到集合中去重
                let s = new Set(arr);
                // 3.把集合转成数组
                arr = [...s];
                // 4.把去重之后的数组内容展示到下拉列表中
                for (let i of arr) {
                    let newOption = new Option(i, i);
                    one.options.add(newOption);
                }

            }
        })
    }

    // 2.当学院下拉列表的值发生改变时，专业和班级下拉列表的值跟着改变
    one.onchange = function () {
        // 获取选择的学院
        let pro = one.value;
        // 清空专业下拉列表里面的选项
        two.options.length = 0;
        // 根据学院在数据库中获取专业
        $.ajax({
            type: "get",
            url: "http://127.0.0.1:9527/page/major",
            data: {
                college: pro
            },
            success: function (res) {
                // console.log(res);
                for (let i of res.data) {
                    let newOption = new Option(i.major, i.major);
                    two.options.add(newOption);
                }
            }
        }).then(function (res) {
            // 获取选择的专业
            let cy = two.value;
            // 清空班级下拉列表里面的选项
            three.options.length = 0;
            // 根据学院和专业，在数据库中获取班级
            $.ajax({
                type: "get",
                url: "http://127.0.0.1:9527/page/grade",
                data: {
                    college: pro,
                    major: cy
                },
                success: function (res) {
                    // console.log(res);
                    // 把班级存入数组中
                    let arr = res.data[0].grade.split(",");
                    console.log(arr);
                    for (let i = 0; i < arr.length; i++) {
                        let newOption = new Option(arr[i], arr[i]);
                        three.options.add(newOption);
                    }
                }
            })
        })
    }

    // 3.当专业下拉列表的值发送改变时，班级的选项跟着改变
    two.onchange = function () {
        // 获取选择的学院
        let pro = one.value;
        // 获取选择的专业
        let cy = two.value;
        // 清空班级下拉列表里面的选项
        three.options.length = 0;
        // 根据学院和专业，在数据库中获取班级
        $.ajax({
            type: "get",
            url: "http://127.0.0.1:9527/page/grade",
            data: {
                college: pro,
                major: cy
            },
            success: function (res) {
                // 把班级存入数组中
                let arr = res.data[0].grade.split(",");
                for (let i = 0; i < arr.length; i++) {
                    let newOption = new Option(arr[i], arr[i]);
                    three.options.add(newOption);
                }
            }
        })


    }

}

function myChart() {
    // echarts图表
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 在数据库中获取学生数据
    $.ajax({
        type: "get",
        url: "http://127.0.0.1:9527/page/collegeStudent",
        data: {},
        success: function (res) {
            let obj = {};
            for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].college in obj) {
                    obj[res.data[i].college]++;
                } else {
                    obj[res.data[i].college] = 1;
                }

            }
            let collegeArr = Object.keys(obj);
            let studentArr = Object.values(obj);

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '学院学生数量统计表'
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                legend: {
                    data: ['学生']
                },
                xAxis: {
                    show: true,
                    axisLabel:{
                        interval:0
                    },
                    data: collegeArr
                },
                yAxis: {},
                series: [{
                    name: '数量',
                    type: 'bar',
                    data: studentArr
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);




        }
    })







}